// ve = vue element
let ve_stray;
$(function () {

    ve_stray = new Vue({
        el: '#stray-data-box',
        data: {
            page_index: 1,
            page_num: 1,
            strays: [],
            go: 1
        },
        methods: {
            get_paging_data(page) {
                if (page < 1) {
                    page = 1;
                } else if (page > ve_stray.page_num)
                    page = page_num;

                ajax_get("/stray/page/" + (page - 1), {}, function (response) {
                    ve_stray.strays = response;
                }, "Getting strays")
            },
            render_modal_box(id) {
                ve_stray_info.stray = ve_stray.strays.find(stray => stray.id === id);
                ve_stray_info.get_comments(0);
            }
        },
        computed: {
            is_logged_in () {
                return ve_nav_bar.validation.id > 0;
            }
        }
    });

    // 选中的流浪者
    let default_stray_info = { id: -1, userId: -1, userName: "", image: "", description: ""};

    let ve_stray_info = new Vue({
        el: "#stray-info",
        data: {
            page_index: 1,
            page_num: 1,
            stray: default_stray_info,
            comments: [],
            leftComment: "",
            errorMessage: "",
            message: ""
        },
        methods: {
            add_comment() {
                ve_stray_info.errorMessage = "";
                if (!ve_nav_bar.is_logged_in()) {
                    ve_stray_info.errorMessage = "请先在个人中心登录哦~";
                    return;
                }

                ajax_post("/comment", {
                    content: ve_stray_info.leftComment,
                    stray: {
                        id: ve_stray_info.stray.id
                    },
                    user: {
                        id: ve_nav_bar.validation.id
                    }
                }, function (response) {
                    if (response.code == null) {
                        ve_stray_info.get_comments(0);
                    }
                })
            },
            get_comments(page) {
                if (page < 1)
                    page = 1;
                else if (page > ve_stray_info.page_num)
                    page = ve_stray_info.page_num;

                ajax_get("/comment/page/stray/" + ve_stray_info.stray.id + "/" + (page - 1), {}, function (response) {
                    ve_stray_info.comments = response;
                }, "Getting comments")
            },
            reset_info() {
                ve_stray_info.stray = default_stray_info;
                ve_stray_info.page_index = 1;
                ve_stray_info.page_num = 1;
                ve_stray_info.comments = [];
                ve_stray_info.leftComment = "";
                ve_stray_info.errorMessage = "";
                ve_stray_info.message = "";
            }
        },
        computed: {
            comment_is_empty() {
                return this.leftComment === "";
            }
        }
    });

    let ve_new_stray_info = new Vue({
        el: "#new-stray-info",
        data: {
            stray: { id: -1, image: "", description: "" },
            errorMessage: "",
            message: "",
            local_image: null,
            uploaded_image_name: ""
        },
        methods: {
            add_stray() {
                let image = ve_new_stray_info.stray.image === "" ? ve_new_stray_info.uploaded_image_name === "" ?
                    default_image : ve_new_stray_info.uploaded_image_name : ve_new_stray_info.stray.image;
                ajax_post("/stray", {
                    image: image,
                    description: ve_new_stray_info.stray.description,
                    user: {
                        id: ve_nav_bar.validation.id
                    }
                }, function (response) {
                    if (response.code != null) {
                        switch (response) {
                            default: ve_new_stray_info.message = response.message;
                        }
                    } else {
                        ve_new_stray_info.message = "流浪者已加入记录！感谢您。";
                        ve_stray.get_paging_data(0);
                        setTimeout(function () {
                            $("#new-stray-info").modal('hide');
                            ve_new_stray_info.message = "";
                            ve_new_stray_info.reset_info();
                        }, 1000);
                    }
                })
            },
            reset_info(){
                ve_new_stray_info.stray = { id: -1, image: "", description: "" };
                ve_new_stray_info.local_image = null;
                ve_new_stray_info.uploaded_image_name = "";
            }
        },
        computed: {
            showing_img() {
                return (this.stray.image === "" || !this.stray.image.startsWith("http")) ?
                    default_image : this.stray.image;
            },
            have_empty_fields() {
                return (this.stray.image === "" && this.local_image == null) || this.stray.description === "";
            },
            image_uploaded() {
                return this.uploaded_image_name.startsWith("image");
            },
            showing_local_img() {
                return (this.uploaded_image_name === "" || !this.uploaded_image_name.startsWith("image")) ?
                    default_image : (imageHost() + this.uploaded_image_name);
            }
        }
    });

    $("#local_stray_image").focus(function () {
        ve_new_stray_info.stray.image = "";
        ve_new_stray_info.errorMessage = "";
    });

    $("#stray_url").focus(function () {
        $("#local_stray_image").val(null);
        delete_image(ve_new_stray_info.uploaded_image_name);
        ve_new_stray_info.uploaded_image_name = "";
        ve_new_stray_info.local_image = null;
        ve_new_stray_info.errorMessage = "";
    });

    $("#local_stray_image").change(function (e) {
        delete_image(ve_new_stray_info.uploaded_image_name);
        ve_new_stray_info.uploaded_image_name = "";

        ve_new_stray_info.local_image = e.target.files["0"];
        upload_image(ve_new_stray_info.local_image, function (response) {
            if (response != null) {
                if (response.code === "0006") {
                    ve_new_stray_info.errorMessage = "图片不能超过 5M";
                } else {
                    ve_new_stray_info.uploaded_image_name = response;
                }
            }
        }, "Uploading image")
    });
});